<#assign content>
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>产品列表</h3>
            </div>
            <div class="title_right">
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            <small></small>
                        </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a id="productAdd"><i class="fa fa-plus-circle"></i></a></li>
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30">
                        </p>
                        <table id="producttable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>产品图</th>
                                <th>产品名</th>
                                <th>产品描述</th>
                                <th>所属分类</th>
                                <th>成本价</th>
                                <th>原价</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tfoot>
                            <tr>
                                <th>产品图</th>
                                <th>产品名</th>
                                <th>产品描述</th>
                                <th>所属分类</th>
                                <th>成本价</th>
                                <th>原价</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</#assign>
<#include "../_inc/layout.ftl" />
<#--产品新增-->
<div class="modal fade" id="productAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">产品新增</h4>
            </div>
            <form id="productAddForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" name="action" value="do">
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品名<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="addname" name="addname" data-validate-length-range="5,12"
                                   placeholder="请输入产品名" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品描述<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="adddescription" name="adddescription"
                                   data-validate-length-range="5,200"
                                   placeholder="请输入产品描述" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品成本价<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="addpprice" name="addpprice" data-validate-length-range="5,12"
                                   placeholder="0.00" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品原价<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="addprice" name="addprice" data-validate-length-range="5,12"
                                   placeholder="0.00" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">所属分类<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <select name="addcid" id="addcategory" class="form-control col-md-6" required>
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品图片<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="file" id="addpic" name="addpic" data-validate-length-range="5,100"
                                   placeholder="0.00" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">默认规格<span class="required">*</span>
                        </label>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="addsweet"> 无糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="addsweet"> 微糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="2" id="" name="addsweet"> 半糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="3" id="" name="addsweet"> 少糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="4" id="" name="addsweet"> 全糖
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="addtemperature"> 冷
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="addtemperature"> 常温
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="2" id="" name="addtemperature"> 热
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="addpearl"> 无珍珠
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="addpearl"> 多珍珠
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="saveProduct" type="button" class="btn btn-success">保存</button>
                        <button class="btn btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<#--产品修改-->
<div class="modal fade" id="productEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">产品修改</h4>
            </div>
            <form id="productEditForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" id="edit_productid" name="id">
                <input type="hidden" id="action" name="action" value="doEdit">
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品名<span class="required">*</span>
                        </label>
                        <div class="col-md-5 ">
                            <input type="text" id="editname" name="editname" data-validate-length-range="5,12"
                                   placeholder="请输入产品名" required="required" class="form-control col-md-6"
                            >
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品描述<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="editdescription" name="editdescription"
                                   data-validate-length-range="5,200"
                                   placeholder="请输入产品描述" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品成本价<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="editpprice" name="editpprice" data-validate-length-range="5,12"
                                   placeholder="请输入产品成本价" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品原价<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="text" id="editprice" name="editprice" data-validate-length-range="5,12"
                                   placeholder="请输入产品原价" required="required" class="form-control col-md-6">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">所属分类<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <select name="editcid" id="editcategory" class="form-control col-md-6" required>
                                <option value="">---请选择---</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">产品图片<span class="required">*</span>
                        </label>
                        <div class="col-md-5">
                            <input type="file" id="editpic" name="editpic" data-validate-length-range="5,100"
                                   placeholder="0.00" class="form-control col-md-6">
                            <img id="editimg" src="" width="50px" height="50px">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="item form-group">
                        <label class="control-label col-md-3">默认规格<span class="required">*</span>
                        </label>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="editsweet"> 无糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="editsweet"> 微糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="2" id="" name="editsweet"> 半糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="3" id="" name="editsweet"> 少糖
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="4" id="" name="editsweet"> 全糖
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="edittemperature"> 冷
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="edittemperature"> 常温
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="2" id="" name="edittemperature"> 热
                                </label>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="radio">
                                <label>
                                    <input type="radio" checked="" value="0" id="" name="editpearl"> 无珍珠
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" value="1" id="" name="editpearl"> 多珍珠
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="saveEditProduct" type="button" class="btn btn-success">保存</button>
                        <button class="btn btn-primary" type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<#--产品删除-->
<div class="modal fade" id="productDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">产品删除</h4>
            </div>
            <form id="productDeleteForm" method="post" novalidate class="form-horizontal form-label-left">
                <input type="hidden" id="delete_productid" name="id">
                <div class="modal-body">
                    <div class="item form-group">
                        <div class="col-md-10">
                            <span id="productDeleteMessage"></span>
                        </div>
                    </div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-8 col-md-offset-9">
                        <button id="saveDeleteProduct" type="button" class="btn btn-success">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    var producttable;

    $(document).ready(function () {
        producttable = $('#producttable').DataTable({
            lengthChange: false,            // 是否允许用户自定义显示数量
            bPaginate: true,                // 翻页功能
            bFilter: false,                 // 列筛序功能
            ordering: false,                // 排序功能
            Info: true,                     // 页脚信息
            autoWidth: true,                // 自动宽度
            pageLength: 10,                 // 每页显示10条数据
            oLanguage: {                    // 国际语言转化
                oAria: {
                    sSortAscending: ': 以升序排列此列',
                    sSortDescending: ': 以降序排列此列'
                },
                sLengthMenu: '显示 _MENU_ 记录',
                sZeroRecords: '对不起，查询不到任何相关数据',
                sEmptyTable: '未有相关数据',
                sLoadingRecords: '正在加载数据...',
                sInfo: '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。',
                sInfoEmpty: '当前显示0到0条，共0条记录。',
                sSearch: '查询:',
                oPaginate: {
                    sFirst: '首页',
                    sPrevious: ' 上一页 ',
                    sNext: ' 下一页 ',
                    sLast: ' 尾页 '
                }
            },
            stripeClasses: ["odd", "even"],                         //为奇偶行加上样式，兼容不支持CSS伪类的场合
            paginationType: 'full_numbers',
            serverSide: true,
            ajax: function (data, callback, settings) {
                var param = {};                                     // 封装请求参数
                param.limit = data.length;                          // 页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;                           // 开始的记录序号
                param.page = (data.start / data.length) + 1;        // 当前页码
                param.action = 'page';
                $.ajax({
                    type: 'POST',
                    url: '/product_list.do',
                    cache: false,                                   //禁用缓存
                    data: param,                                    //传入组装的参数
                    dataType: 'json',
                    success: function (result) {
                        // 封装返回数据
                        var returnData = {};
                        returnData.recordsTotal = result['recordsTotal'];              // 返回数据全部记录
                        returnData.recordsFiltered = result['recordsFiltered'];        // 后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result['records'];// 返回的数据列表
                        callback(returnData);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            },
            columns: [
                {
                    data: 'picpath',
                    render: function (data, type, row) {
                        var imagesrc = '${annexImage}' + row.picpath;
                        return '<img src="' + imagesrc + '" height="50px" width="50px"/>';
                    }
                },
                {data: 'name'},
                {data: 'description'},
                {data: 'cname'},
                {
                    data: 'pprice',
                    render: function (data, type, row, meta) {
                        return priceUtil.Price.toPriceString(row.price * 1);
                    }
                },
                {
                    data: 'price',
                    render: function (data, type, row, meta) {
                        return priceUtil.Price.toPriceString(row.price * 1);
                    }
                },
                {
                    data: 'flag',
                    render: function (data, type, row, meta) {
                        if (data == 1) {
                            return '<span style="color: #00CC33">正常</span>';
                        } else {
                            return '<span style="color: #be2626">已删除</span>';
                        }
                    }
                },
                {
                    data: 'id',
                    render: function (data, type, row, meta) {
                        var str = '';
                        if (row.flag == 1) {
                            str += '<button onclick="$.editProduct(\'' + row.id + '\')" type="button" class="btn btn-success btn-xs"><i class="fa fa-pencil"></i>修改</button>';
                            str += '<button onclick="$.deleteProduct(\'' + row.id + '\')" type="button" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i>删除</button>';
                            str += '<button onclick="$.productFormula(\'' + row.id + '\')" type="button" class="btn btn-info btn-xs"><i class="fa fa-plus-square"></i>配方</button>';
                            str += '<button onclick="$.productAttached(\'' + row.id + '\')" type="button" class="btn btn-info btn-xs"><i class="fa fa-forumbee"></i>附料</button>';
                        }
                        return str;
                    }
                }
            ],
            columnDefs: [
                {orderable: false, targets: '_all'},
                {defaultContent: '', targets: '_all'}
            ]
        });

        // 产品新增
        $('#productAdd').on('click', function () {

            var param = {};
            param.machid = $('#machid').val();
            $.ajax({
                type: 'POST',
                url: '/product_add.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function (result) {
                    if (result.success) {
                        $('#addcategory').html(result.body.sCategoryList);
                        $('#productAddModal').modal({
                            keyboard: true
                        });
                    }
                    else {
                        $.promptModal('${warning}', result.body.msg, result.logout);
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        });

        // 窗体关闭清空页面
        $('#productAddModal').on('hide.bs.modal', function () {
            $('#productAddForm')[0].reset();
        });

        // 窗体关闭清空页面
        $('#productEditModal').on('hide.bs.modal', function () {
            $('#productEditForm')[0].reset();
        });

        // 提交保存
        $('#saveProduct').on('click', function () {
            if (validator.checkAll($('#productAddForm'))) {
                var param = new FormData($('#productAddForm')[0]);
                $('#productAddForm')[0].reset();
                $('#productAddModal').modal('hide');
                $.ajax({
                    type: 'POST',
                    url: '/product_add.do',
                    cache: false,
                    processData: false,
                    contentType: false,
                    traditional: true,
                    dataType: 'json',
                    data: param,
                    success: function (result) {
                        if (result.success) {
                            producttable.draw(false);
                        }
                        else {
                            $.promptModal('${warning}', result.msg, result.logout);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            }
        });

        // 修改
        $.editProduct = function (id) {
            var param = {};
            param.action = 'edit';
            param.id = id;
            $.ajax({
                type: 'POST',
                url: '/product_edit.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function (result) {
                    if (result.success) {
                        $('#edit_productid').val(id);
                        $('#editname').val(result.body.sProduct.name);
                        $('#editdescription').val(result.body.sProduct.description);
                        $('#editpprice').val(priceUtil.Price.toPriceString((result.body.sProduct.pprice) * 1));
                        $('#editprice').val(priceUtil.Price.toPriceString((result.body.sProduct.price) * 1));
                        $('#editcategory').html(result.body.sCategoryList);
                        $('#editimg').attr("src", "${annexImage}" + result.body.sProduct.picpath);
                        var materials = result.body.sProduct.materials;
                        var array = materials.split(",");
                        $("input[name=editsweet]").get(array[0]).checked = true;
                        $("input[name=edittemperature]").get(array[1]).checked = true;
                        $("input[name=editpearl]").get(array[2]).checked = true;
                        $('#productEditModal').modal({
                            keyboard: true
                        });
                    }
                    else {
                        $.promptModal('${warning}', result.msg, result.logout);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        };

        // 保存修改
        $('#saveEditProduct').on('click', function () {
            if (validator.checkAll($('#productEditForm'))) {
                var param = new FormData($('#productEditForm')[0]);
//                param.action = 'doEdit';
//                param.id = $('#edit_productid').val();
//                param.name = $('#editname').val();
//                param.ename = $('#editdescription').val();
//                param.price = $('#editprice').val();
//                param.status = $('#editstatus').val();
//                param.cid = $('#editcategory').val();
                $('#productEditForm')[0].reset();
                $('#productEditModal').modal('hide');
                $.ajax({
                    type: 'POST',
                    url: '/product_edit.do',
                    cache: false,
                    processData: false,
                    contentType: false,
                    traditional: true,
                    dataType: 'json',
                    data: param,
                    success: function (result) {
                        if (result.success) {
                            producttable.draw(false);
                        }
                        else {
                            $.promptModal('${warning}', result.msg, result.logout);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $.promptModal('${warning}', '${systemException}', false);
                    }
                });
            }
        });

        // 删除
        $.deleteProduct = function (id) {
            $('#delete_productid').val(id);
            $('#productDeleteMessage').html('确定删除产品信息？');
            $('#productDeleteModal').modal({
                keyboard: true
            });
        };

        // 保存删除
        $('#saveDeleteProduct').on('click', function () {
            var param = {};
            param.action = 'doDelete';
            param.id = $('#delete_productid').val();
            $('#productDeleteModal').modal('hide');
            $.ajax({
                type: 'POST',
                url: '/product_edit.do',
                cache: false,
                dataType: 'json',
                data: param,
                success: function (result) {
                    if (result.success) {
                        producttable.draw(false);
                    }
                    else {
                        $.promptModal('${warning}', result.msg, result.logout);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.promptModal('${warning}', '${systemException}', false);
                }
            });
        });
        //跳转到参数详情页面
        $.productFormula = function (id) {
            var param = {};
            param.productid = id;
            param.page = "page";
            $.submitFormPost('/formula_list.do', param, 'POST');
        };
        //跳转到附料详情页面
        $.productAttached = function (id) {
            var param = {};
            param.productid = id;
            //param.page ="page";
            $.submitFormPost('/attached_list.do', param, 'POST');
        };
    });
</script>

